<template>
  <div class="order">
      <div class="back-nav-box">
      <van-nav-bar
        title="订单"
      />
    </div>
    <div class="score">
    <!-- 我的订单选择切换组件 -->
    <div class="my-box">
        <van-tabs v-model="activeName" >
            <van-tab title="全部" name="total">
               <my-total></my-total> 
                
            </van-tab>
            <van-tab title="进行中" name="doing">
                <my-doing></my-doing>
            </van-tab>
            <van-tab title="已完成" name="done">
                <my-done></my-done>
            </van-tab>
        </van-tabs>
    </div>

    <!-- 订单数据 -->
    <div class="my-data">
        
      
    </div>

    </div>
  </div>
</template>

<script>
import MyTotal from "../components/MyTotal.vue";
import MyDoing from "../components/MyDoing.vue";
import MyDone from "../components/MyDone.vue";


export default {
    name: 'Order',
    components: {
        MyTotal,
        MyDoing,
        MyDone
    },
    data() {
        return{
            //激活name
             activeName: 'total',
            //订单商品数据
            myOrderArr: [], 
            //状态码
            status: 0,
        }
    },
    
    
}
</script>

<style lang='less' scoped>
@import url("../assets/base.less");
.order{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: @bg_Color;
}
.score {
  height:84%;
  //底部预留50px ,给底部导航栏
  margin-bottom: 50px;
  overflow-y: scroll;
}
.back-nav-box {
  position: sticky;
  top: 0;
  color: @mainColor;
  background-color: #38BCFF;
}
.my-box {
  margin: 0 10px;
  background-color: rgba(255,255,255,0.5);
  position: relative;
  top: 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}
.my-data {
  margin: 5px 10px;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
 
}
</style>